﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../../../Content/Site.css" rel="stylesheet" />
    <script src="../../../Scripts/jquery/jquery-1.11.0.min.js"></script>
    <link href="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <script src="../../../Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getColumnInfo.js"></script>
    <script src="../../../Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getDom.js"></script>
    <script src="../../../Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.operateColumn.js"></script>
    <script>
        $(function () {
            var getFrozenColumns = function () {
                var result = [];

                var c1 = [];
                c1.push({ field: 'ID', title: '主键', width: 200 });
                c1.push({ field: 'AreaName', title: '地区', width: 250 });
                c1.push({ field: 'Sex1', title: '男', width: 190 });
                c1.push({ field: 'Sex2', title: '女', width: 190 });

                result.push(c1);

                return result;
            };

            var getColumns = function () {
                var result = [];

                var normal00000 = [
                    { field: 'TS1', title: '测试1', width: 260 },
                    { field: 'TS2', title: '测试2', width: 360 }
                ];
                result.push(normal00000);

                return result;
            };
            var options = {
                title: "列表",
                idField: "ID",
                rownumbers: true,
                fit: true,
                border: false,
                singleSelect: true,
                frozenColumns: getFrozenColumns(),
                columns: getColumns(),
                method: "get",
                url: "datagrid-common-data.json",
                toolbar: [
                    {
                        text: "锁定索引15", iconCls: 'icon-edit', handler: function () {
                            $("#dg1").datagrid("freezeRow", 15);
                        }
                    },
                    {
                        text: "解锁“女”列", iconCls: 'icon-edit', handler: function () {
                            $("#dg1").datagrid("unfreezeColumn", "Sex2");
                        }
                    },
                    {
                        text: "锁定“女”列", iconCls: 'icon-edit', handler: function () {
                            $("#dg1").datagrid("freezeColumn", "Sex2");
                        }
                    }
                ],
                onLoadSuccess: function (data) {
                    var t = $(this);
                    var freezeRowIndexs = [0, 4, 8];
                    $.each(freezeRowIndexs, function (i, item) {
                        var row = data.rows[item];
                        if (row) {
                            t.datagrid("freezeRow", item);
                        }
                    });
                }
            };

            $("#dg1").datagrid(options);
        });
    </script>
</head>
<body>
    <div class="easyui-panel" data-options="fit:true,border:false">
        <table id="dg1"></table>
    </div>
</body>
</html>
